<template>
  <div class="demo-container">
    <!-- 面包屑导航 -->
     <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
      <el-breadcrumb-item>库区</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    
    <!-- 条件查询区域 -->
    <el-card class="card search-card" shadow="hover">
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="经办人">
          <el-input v-model="searchForm.CreateBy" placeholder="请输入" clearable />
        </el-form-item>
          <el-form-item label="产品编号">
          <el-input v-model="searchForm.BarCode" placeholder="产品编号" clearable />
        </el-form-item>
        <el-form-item label="产品">
          <el-input v-model="searchForm.ProductName" placeholder="请输入产品名称或编号" clearable />
        </el-form-item>
        
        <el-form-item label="产品类型">
          <el-select v-model="searchForm.ProductTypeName" placeholder="请选择" clearable style="width: 220px;">
            <el-option label="空气净化设备" value="空气净化设备" />
            <el-option label="核心部件" value="核心部件" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="单位">
          <el-select v-model="searchForm.Unit" placeholder="请选择" clearable style="width: 220px;">
            <el-option label="台" value="台" />
            <el-option label="块" value="块" />
            <el-option label="套" value="套" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchProducts">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作和内容区域 -->
    <el-card class="card content-card" shadow="hover">
      <!-- <template #header>
        <div class="card-header">
          <span>数据列表</span>
          <div class="operation-buttons">
            <el-button type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>新增</el-button>
            <el-button type="success" @click="handleExport"><el-icon><Download /></el-icon>导出</el-button>
            <el-button type="warning" @click="handleBatchDelete" :disabled="!hasSelection">
              <el-icon><Delete /></el-icon>批量删除
            </el-button>
          </div>
        </div>
      </template> -->
      
      <!-- 数据表格 -->
       <el-table :data="tableData" border style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="productCode" label="出入库单号" width="120" />
        <el-table-column prop="createTime" label="出入库时间" width="120">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="productTypeName" label="出入库类型" width="120" />
        <el-table-column prop="supplierId" label="合作客商" width="100" />
        <el-table-column prop="createBy" label="经办人" width="100" />
        <el-table-column prop="barCode" label="产品编号" width="120" />
        <el-table-column prop="productName" label="产品名称" width="150" />
        <el-table-column prop="unit" label="单位" width="80" />
        <el-table-column prop="productTypeName" label="产品类型" width="120" />
        <el-table-column prop="createBy" label="条码" width="100" />
        <el-table-column prop="warehousingPrice" label="入库单价" width="100"/>
          <el-table-column prop="remark" label="备注" width="150"/>   
            <el-table-column prop="outboundPrice" label="出库单价" width="100"> 
          <template #default="scope">
            {{ scope.row.outboundPrice.toFixed(2) }}
          </template>
        </el-table-column>
       
      </el-table>
    </el-card>

    <!-- 分页区域 -->
    <el-card class="card pagination-card" shadow="hover">
      <div class="pagination-container">
        <div class="pagination-info">
          <span>共 {{ pagination.total }} 条记录，当前显示第 {{ (pagination.pageIndex - 1) * pagination.pageSize + 1 }} - {{ Math.min(pagination.pageIndex * pagination.pageSize, pagination.total) }} 条</span>
        </div>
        <el-pagination v-model:current-page="pagination.pageIndex" v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]" :total="pagination.total" 
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import http from '@/Axios/Htttp'

// 搜索表单
const searchForm = reactive({
  BarCode: '',
  ProductTypeName: '',
  CreateBy: '',
  CreateTime: null as any, // 改为支持日期范围
  Unit:'',
  ProductName:''
})
const Count=ref()


// 表格数据
const tableData = ref([])
const loading = ref(false)

// 分页
const pagination = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0
})

// 获取产品列表
const getProductList = async () => {
  loading.value = true
  try {
    // 构建查询参数，过滤掉空值
    const params: any = {
      PageIndex: pagination.pageIndex,
      PageSize: pagination.pageSize
    }

    // 只添加有值的搜索条件
    if (searchForm.ProductName?.trim()) {
      params.ProductName = searchForm.ProductName.trim()
    }
    if (searchForm.Unit?.trim()) {
      params.Unit = searchForm.Unit.trim()
    }
    if (searchForm.BarCode?.trim()) {
      params.BarCode = searchForm.BarCode.trim()
    }
    if (searchForm.CreateBy?.trim()) {
      params.CreateBy = searchForm.CreateBy.trim()
    }
    if (searchForm.CreateTime && Array.isArray(searchForm.CreateTime) && searchForm.CreateTime.length === 2) {
      params.StartTime = searchForm.CreateTime[0]
      params.EndTime = searchForm.CreateTime[1]
    }
    if (searchForm.ProductTypeName?.trim()) {
      params.ProductTypeName = searchForm.ProductTypeName.trim()
    }
    
    const response = await http.get('api/Productlits/GetProductList', { params })
    
    if (response.data.code === 200) {
      tableData.value = response.data.pageData || []
      pagination.total = response.data.todalCount || 0
      Count.value=response.data.todalCount
    } else {
      ElMessage.error(response.data.message || '查询失败')
    }
  } catch (error) {
    console.error('获取产品列表失败:', error)
    ElMessage.error('查询失败，请检查网络连接')
  } finally {
    loading.value = false
  }
}

// 搜索
const searchProducts = () => {
  // 检查是否有搜索条件
  const hasSearchCondition =
    searchForm.ProductName?.trim() ||
    searchForm.BarCode?.trim() ||
    searchForm.CreateBy?.trim() ||
    searchForm.Unit?.trim() ||
    searchForm.ProductTypeName?.trim() ||
    (searchForm.CreateTime && Array.isArray(searchForm.CreateTime) && searchForm.CreateTime.length === 2)

  if (!hasSearchCondition) {
    ElMessage.warning('请至少输入一个查询条件')
    return
  }

  pagination.pageIndex = 1
  getProductList()
}

// 重置搜索
const resetSearch = () => {
  // 重置搜索表单所有字段
  searchForm.BarCode = ''
  searchForm.ProductTypeName = ''
  searchForm.CreateBy = ''
  searchForm.CreateTime = null
  searchForm.Unit = ''
  searchForm.ProductName = ''

  // 重置分页到第一页
  pagination.pageIndex = 1

  // 重新获取数据
  getProductList()
}

// 分页处理
const handleSizeChange = (val: number) => {
  pagination.pageSize = val
  getProductList()
}

const handleCurrentChange = (val: number) => {
  pagination.pageIndex = val
  getProductList()
}

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 初始化
onMounted(() => {
  getProductList()
})
</script>

<style scoped>
/* 基础容器样式 */
.demo-container {
  padding: 20px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #1a1a2e 75%, #16213e 100%);
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(66, 165, 245, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(92, 107, 192, 0.1) 0%, transparent 50%);
  min-height: 100vh;
  position: relative;
}

/* 纹理背景 */
.demo-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

.demo-container > * {
  position: relative;
  z-index: 1;
}

/* 卡片通用样式 */
.card {
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* 页头和操作区 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.operation-buttons {
  display: flex;
  gap: 10px;
}

/* 分页区域 */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-card) {
  border-radius: 12px;
  transition: all 0.3s ease;
}

:deep(.el-card:hover) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(235, 238, 245, 0.5);
  background: rgba(248, 249, 250, 0.5);
  border-radius: 12px 12px 0 0;
}

:deep(.el-table) {
  margin-top: 10px;
  background: transparent;
}

:deep(.el-table__header-wrapper) {
  background: rgba(64, 158, 255, 0.1);
}

:deep(.el-table__body-wrapper) {
  background: transparent;
}

:deep(.el-breadcrumb__inner) {
  color: #2c3e50;
  font-weight: 500;
}

:deep(.el-breadcrumb__inner:hover) {
  color: #409EFF;
}
</style>
